{% extends "base.html" %}
{% load i18n %}
{% load static %}
{% load wger_extras %}
{% load cache %}

{% block header %}
{% endblock %}

{% block title %}{% translate "Ingredient overview" %}{% endblock %}


{% block content %}
    {% if ingredients_list %}
        <div class="list-group">
            {% for ingredient in ingredients_list %}
                <a class="list-group-item list-group-item-action d-inline-flex align-items-center justify-content-start"
                   href="{{ ingredient.get_absolute_url }}">
                <span class="text-white rounded-circle m-1 me-2"
                      style="background-color: lightgray; width: 40px; height: 40px;">
                    {% if ingredient.image %}
                        <img src="{{ ingredient.image.image.url }}"
                             class="img-fluid"
                             alt="{{ ingredient.name }}"
                             style="height: 40px; width: 40px; border-radius: 50%; object-fit: cover;">
                    {% else %}
                        <i class="fas fa-camera fa-sx" style="text-align:center; width: 40px;"></i>
                    {% endif %}
                  </span>
                    {{ ingredient.name }}
                </a>
            {% endfor %}
        </div>
    {% else %}
        <p>
            <a href="{% url 'nutrition:ingredient:add' %}"
               class="btn btn-light btn-block">
                {% translate "No ingredients." %} {% translate "Add one now." %}
            </a>
        </p>
    {% endif %}


    <div style="padding-top:3em;"></div>
    {% pagination paginator page_obj %}
{% endblock %}

{% block sidebar %}
    <h4>{% translate "Search" %}</h4>
    <div id="react-ingredient-search"></div>

{% endblock %}


{#         #}
{# Options #}
{#         #}
{% block options %}
    {% if perms.nutrition.add_ingredient %}
        {% translate 'Add' as text %}
        {% modal_link url='nutrition:ingredient:add' text=text %}
    {% endif %}
{% endblock %}
